<template>
  <div class="header" :class='[headerScroll]'>
	  <RouterLink to='/location'>
		  <div class="header-city">
		  		  <span class="iconfont">{{this.$store.state.city}}&#xe616;</span>
		  </div>
	  </RouterLink>
	  <div class="header-search"><span class="iconfont">&#xe6a2; 目的地/酒店/景点/关键字</span></div>
	  
	  <div class="header-login">
		  <RouterLink to='/login'>
			  <span class="iconfont">&#xe65a;</span>
		  </RouterLink>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'homeHeader',
  props:['city'],
  data(){
	  return{
		  headerScroll:''
	  }
  },
  methods:{
	  srollChange(){
		  let scrollHeight=document.documentElement.scrollTop
		  if(scrollHeight>0){
			 this.headerScroll='headerScroll'
		  }else{
			 this.headerScroll='uheaderScroll'
		  }
	  }
  },
  mounted(){
	  window.addEventListener('scroll',this.srollChange)
  },
  beforeDestroy() {
  		window.removeEventListener("scroll",this.srollChange)
  	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.header
	background:#fff
	text-align: center
	line-height: 44px
	display:flex
	margin:0 auto
	width:100%
	.header-city
		margin-left:0.1rem
		color:#23beae
	.header-search
		flex:1
		height:30px
		line-height:30px
		border-radius:25px
		box-shadow:0 0 0.5px 0.5px #ccc
		margin:6px 12px
		background:#eaedf1
		span
			color:#93989f
			font-size:15px
	.header-login
		float:right
		width:10%
		color:#23beae
.headerScroll
	position:fixed
	top:0
	left:0
	max-width:1080px
	z-index:100
	box-shadow:0 0 0.05rem 0.02rem #ccc
.uheaderScroll
	box-shadow:0 0 0 0
</style>
